<template>
  <div>
    <table-box ref="tableBox" show-index show-selection :table-config="tableConfig" @selection-change="handleSelectionChange" @btnOperate="handleBtnOperate" />
    <AddEdit ref="addEdit" @on-success="handleOnSuccess" />
  </div>
</template>

<script>
import AddEdit from './components/AddEdit'
import { leasingManagerDisable, leasingManagerEnable } from '@/api/channelTask2/leasingManager'
export default {
  name: 'LeasingManager',
  components: {
    AddEdit
  },
  props: {
  },
  data() {
    return {
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/ctmInvestmentManager/page`,
        // hideSearchBar: true,
        sort: 'createTime',
        order: 'DESC',
        setting: [
          {
            prop: 'managerAccount',
            label: '域账号',
            minWidth: 120
          },
          {
            prop: 'managerName',
            label: '招商经理名称',
            minWidth: 130
          },
          {
            prop: 'managerPhone',
            label: '招商经理电话',
            minWidth: 130
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: 120,
            type: 'hidden',
            formatData: v => {
              return [1, '1'].includes(v.enable) ? '启用' : '停用'
            }
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 120
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 140,
            type: 'date'
          }
        ],
        btnList: process.env.NODE_ENV === 'development' ? [
          { buttonName: '新增', optCode: 'add', outerFlag: true },
          { buttonName: '编辑', optCode: 'edit', outerFlag: true },
          { buttonName: '停用', optCode: 'disable', outerFlag: true },
          { buttonName: '启用', optCode: 'enable', outerFlag: true }
        ] : null
      },
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handleBtnOperate(flag) {
      this[flag] && this[flag]()
    },
    add() {
      this.$refs.addEdit.openDialog()
    },
    edit() {
      if (!this.singleJudge(this.selectedRows, '编辑', true)) {
        return
      }
      this.$refs.addEdit.openDialog(this.selectedRows[0])
    },
    disable() {
      if (!this.singleJudge(this.selectedRows, '停用')) {
        return
      }
      if (this.selectedRows.some(e => [0, '0'].includes(e.enable))) {
        this.$message.warning('所选项包含【停用】数据!')
        return
      }
      this.$msgbox({
        title: '停用',
        message: `<div>将停用<span style="color: red;">${this.selectedRows.length}</span>条数据</div>`,
        showCancelButton: true,
        dangerouslyUseHTMLString: true
      }).then(() => {
        return leasingManagerDisable(this.selectedRows.map(e => e.id)).then(res => {
          this.$message.success('操作成功!')
          this.refreshTableBoxData('onPage')
        })
      })
    },
    enable() {
      if (!this.singleJudge(this.selectedRows, '启用')) {
        return
      }
      if (this.selectedRows.some(e => [1, '1'].includes(e.enable))) {
        this.$message.warning('所选项包含【启用】数据!')
        return
      }
      this.$msgbox({
        title: '启用',
        message: `<div>将启用<span style="color: red;">${this.selectedRows.length}</span>条数据</div>`,
        showCancelButton: true,
        dangerouslyUseHTMLString: true
      }).then(() => {
        return leasingManagerEnable(this.selectedRows.map(e => e.id)).then(res => {
          this.$message.success('操作成功!')
          this.refreshTableBoxData('onPage')
        })
      })
    },
    refreshTableBoxData(flag) {
      this.$nextTick(() => {
        this.$refs.tableBox.initTableData(flag)
      })
    },
    handleOnSuccess(type) {
      this.refreshTableBoxData(type)
    }
  }
}
</script>
